<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<script src="js/jquery.js"></script>
	<script>
		$(() => {
			/*No cache for css*/
			$('link.cssLink').each((index, element) => {
				let url = $(element).attr('href');
				url += '?rand=' + Math.random();
				$(element).attr('href', url);
			});
			
			/*Auto completion function*/
			$('#searchInput').on('keydown', (e) => {
				let keyword = $(e.target).val();
				let requestData = 'keyword=' + keyword;
				console.log(requestData);
				$.ajax({
					url: 'Search',
					method: 'GET',
					accept: 'application/json',
					data: requestData,
					success: (productList, status) => {
						let dataList = $('#autoCompletion');
						/*Clear the origin datalist*/
						dataList.children().remove();
						console.log(productList);
						productList.forEach((element, index) => {
							/*Max number of auto completion is 10
                            Although this should be done in server*/
							const MAX_NUMBER_OF_COMPLETION = 10;
							if (index < MAX_NUMBER_OF_COMPLETION) {
								dataList.append('<option class="autocomplete-option" value="' + element.name + '">' + element.name + '</option>');
							}
						});
						
					}
				});
			});
			
		});
	</script>
	<link class="cssLink" href="css/jpetstore.css" media="screen"
		  rel="StyleSheet" type="text/css"/>
	<link href="css/icono.min.css" rel="stylesheet" type="text/css">
	<link class="cssLink" href="css/mycss.css" rel="stylesheet" type="text/css">
	<meta content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"
		  name="generator"/>
	<title>MyPetStore</title>
	<meta content="text/html; charset=windows-1252"
		  http-equiv="Content-Type"/>
	<meta content="max-age=0" http-equiv="Cache-Control"/>
	<meta content="no-cache" http-equiv="Cache-Control"/>
	<meta content="0" http-equiv="expires"/>
	<meta content="Tue, 01 Jan 1980 1:00:00 GMT" http-equiv="Expires"/>
	<meta content="no-cache" http-equiv="Pragma"/>
</head>

<body>
<div th:fragment="top">
	<div id="Header">
		
		<div id="Logo">
			<div id="LogoContent">
				<a href="Main"><img src="images/logo-topbar.gif"/></a>
			</div>
		</div>
		
		<div id="Menu">
			<div id="MenuContent">
				<a href="CartPage"><img align="middle" name="img_cart" src="images/cart.gif"/></a>
				<img align="middle" src="images/separator.gif"/>
				<span th:if="${session.loginUser==null}">
				<a href="LoginPage">Log In</a>
				<img align="middle" src="images/separator.gif"/>
				<a href="RegisterPage">Register Now</a>
			</span>
				<span th:if="${session.loginUser!=null}">
				<a href="Logout">Log Out</a>
				<img align="middle" src="images/separator.gif"/>
				<a href="AccountInformation">My Account</a>
			</span>
				<img align="middle" src="images/separator.gif"/>
				<!--  <a href="DevelopRoad.html">Development Road</a>-->
				<a href="help.html">?</a>
			</div>
		</div>
		
		<div id="Search">
			<div id="SearchContent">
				<form action="SearchPage" method="post">
					<input autocomplete="off" id="searchInput" list="autoCompletion" name="keyword" size="14"
						   type="text"/>
					<datalist id="autoCompletion">
					</datalist>
					<input id="searchButton" name="searchProducts" type="submit" value="Search"/>
				</form>
			</div>
		</div>
		
		<div id="QuickLinks">
			<a href="Category?categoryID=FISH"><img src="images/sm_fish.gif"/></a>
			<img src="images/separator.gif"/>
			<a href="Category?categoryID=DOGS"><img src="images/sm_dogs.gif"/></a>
			<img src="images/separator.gif"/>
			<a href="Category?categoryID=REPTILES"><img src="images/sm_reptiles.gif"/></a>
			<img src="images/separator.gif"/>
			<a href="Category?categoryID=CATS"><img src="images/sm_cats.gif"/></a>
			<img src="images/separator.gif"/>
			<a href="Category?categoryID=BIRDS"><img src="images/sm_birds.gif"/></a>
		</div>
	
	</div>
</div>
</body>
</html>
	